<template>
    <div id="root">
        <div id="content">
            <el-row id="row_logo">
                <el-image id="iv_logo" src="src/assets/Tree2.png" fit="contain"></el-image>
            </el-row>
            <el-form id="form" ref="ruleFormRef" :label-position="labelPosition" label-width="100px" :model="loginInfo"
                style="max-width: 1000px">
                <el-form-item label="账号">
                    <el-input v-model="loginInfo.account" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="loginInfo.password" />
                </el-form-item>
                <el-row>
                    <el-button id="btn_login" type="primary" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                </el-row>
                <el-row id="row_register">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        注册
                    </el-button>
                    <el-button type="primary" @click="loginTest(ruleFormRef)">
                        试用演示账户
                    </el-button>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormProps } from 'element-plus'
import router from '@/router';
import { KnowledgeCategoryModel } from '@/model/KnowledgeCategoryModel';
import {
    GaRequestConfig,
    GaRequestMethod,
    GaRequestBodyInputType, GaResponseBodyOutputType, GaRequestManager, GaNetworkStatusCode,
    TwResultModel,
    GaMd5Manager
} from 'ga_utility_sdk_base';
import type { UserModel,LoginInfo } from '@/model/UserModel';
import { GlobalTool } from '@/utils/GlobalTool';

const labelPosition = ref<FormProps['labelPosition']>('top')
const loginInfo = reactive({
    account: '',
    password: '',
})



function submitForm() {
    let encryptPassword = GaMd5Manager.md5String32lower(loginInfo.password);
    console.log(`password is: ${encryptPassword}`);
    let _loginInfo:LoginInfo = {
        account:loginInfo.account,
        password:encryptPassword
    }

    let config = new GaRequestConfig(GaRequestMethod.POST, GaRequestBodyInputType.OBJ_2_JSON, GaResponseBodyOutputType.BLOB_2_JSONOBJ);
    config.requestBodyInput = _loginInfo;
    config.apiPath = "User/Login";
    GaRequestManager.sharedInstance().invokeRequest<UserModel>(config, (status: GaNetworkStatusCode, res: TwResultModel<UserModel>, msg, info) => {
        if (status == GaNetworkStatusCode.Ok) {
            let code = res.code;
            if (code == 0) {
                //响应成功.
                console.log(res);
                let user:UserModel = res.resultData.item as UserModel;
                GlobalTool.setCurrentUser(user);
                console.log(`login success,token is:${user.token}`)
                GaRequestManager.sharedInstance().setCommonHeaderPair("Authorization",user.token);
                router.push("00-home");
            }
            else {
                console.log(res.message);
            }
        }
        else {
            //响应失败.
            console.log(`status is: ${status},msg is: ${msg}`)
        }
    });
}
function loginTest() {
    loginInfo.account = "test";
    loginInfo.password = "910509";
}

</script>

<style scoped>
#root {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content {
    /* margin-bottom: 200px; */
    /* flex-grow: 1; */
    width: 500px;
    margin: 0px 20px 200px 20px;
}

#btn_login {
    width: 100%;
    margin-bottom: 20px;
}

#row_register {
    width: 100%;
    justify-content: space-between;
    /* display:flex; */
}

:deep #iv_logo {
    width: 100px;
    height: 100px;
}

#row_logo {
    justify-content: center;
}
</style>